<template>
    <el-form :model="orderDataOne"    class="demo-ruleForm">
        <el-form-item label="用户地址" prop=" userId">
            <el-input type="text" v-model="orderDataOne. userId.userAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop=" userId">
            <el-input type="text" v-model="orderDataOne. userId.userPhoneNumber" autocomplete="off" ref='checkPhone' @blur="checkPhoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input type="text" v-model.number="orderDataOne.remark"></el-input>
        </el-form-item>

        <el-form-item label="发货状态" prop="status">
            <el-select v-model="orderDataOne.status" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="数量" prop="number">
            <el-input type="text" v-model.number="orderDataOne.number" ref='checkNumber' @blur="checkStatusNumber"></el-input>
        </el-form-item>

        <el-form-item label="用户是否删除" prop="status">
            <el-select v-model="orderDataOne.show" placeholder="请选择">
                <el-option
                v-for="item in isdelete"
                :key="item.label"
                :label="item.label"
                :value="item.label">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="button" @click='chengeOrderData(orderDataOne)'>确认修改  </el-button>
            <el-button >重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {createNamespacedHelpers} from 'vuex';
    const {mapState,mapActions,mapMutations,mapGetters}=createNamespacedHelpers('orderStore');
    import axios from 'axios'
    export default {
        created() {
            const id=this.$route.params._id
            this.updataOrderLiseAsync(id)
        },
        data(){
            return{
               options:[{value:'未发货',label:'未发货'},{value:'已发货',label:"已发货"},{value:'已取消',label:"已取消"}],
               isdelete:[{value:'是',label:'是'},{value:'否',label:"否"}]

            }
        },
        methods: {
            ...mapActions(['updataOrderLiseAsync','chengeOrderData']),
            checkStatusNumber(){
                const numberResult=/[\d]/.test(this.$refs.checkNumber.value)
                if(numberResult==false){
                    alert("请输入数字");
                    this.$refs.checkNumber.value=''
                }
            },
            checkPhoneNumber(){
                if(!(/^1[3456789]\d{9}$/.test(this.$refs.checkPhone.value))){ 
                    alert("手机号码有误，请重新输入");  
                    this.$refs.checkPhone.value=''
                } 
            }

        },
        computed: {
            ...mapState(['orderDataOne'])
        },
    }
</script>

<style >
    
</style>